<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>web页面广告</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .web{
            width: 950px;
            height: 10000px;
            background-color: #cecece;
            border: #666666 1px solid;
            margin: 0 auto;
            padding: 20px;
            align-items: center;
        }
        .ad {
            width: 300px;
            height: 250px;
            border: 1px solid black;
            position: fixed;
            right: 0;
            bottom: 0;
            background: url("images4/ad2.jpg");
        }
        .ad>p {
            display: flex;
            justify-content: space-between;
        }
        .closeBtn {
            padding: 0 4px;
        }
    </style>
</head>
<body>
<div class="ad" id="ad">
    <p>
        <span class="countdown" id="countdown"></span>
        <input type="button" style="background: url(images4/close.png);height: 30px;width: 100px;" class="closeBtn" id="closeBtn">
    </p>
</div>
<div class="web">
    <h1>web页面广告</h1>
</div>
<script>

    //定义广告两边的初始属性
    var l_width = "100px";
    var l_height = "250px";
    var l_img="images4/ad1.jpg";
    var l_close="images4/close.png";

    //创建广告容器的div  左边
    var l_left =document.createElement("div");
    l_left.style.width = l_width;                   /* 定义左边容器的长 ,连接上面已定义*/
    l_left.style.height = l_height;                   /* 定义左边容器的高，上面已定义*/
    l_left.style.padding="0px";                     /* 内边距属性*/
    l_left.style.position="absolute";               /* Position属性规定元素的定位类型    绝对的*/
    l_left.style.left = "30px";



    //创建广告容器的div    右边
    var l_right =document.createElement("div");
    l_right.style.width = l_width;                   /* 定义右边容器的长 ,连接上面已定义*/
    l_right.style.height = l_height;                   /* 定义右边容器的高，上面已定义*/
    l_right.style.padding="0px";                     /* 内边距属性*/
    l_right.style.position="absolute";               /* Position属性规定元素的定位类型    绝对的*/
    l_right.style.right= "30px";


    //创建 img 元素，并加入到 l_left 中，作为广告图片
    var limg1=document.createElement("img");
    limg1.src=l_img;
    l_left.appendChild(limg1);

    //创建 img 元素，并加入到 l_right 中，作为广告图片
    var limg2=document.createElement("img");
    limg2.src=l_img;
    l_right.appendChild(limg2);




    //创建关闭按钮，并加入到 l_left 和 l_right中
    var closeimg1=document.createElement("img");
    closeimg1.src=l_close;
    closeimg1.style.width="50px";
    closeimg1.style.position="relative";
    closeimg1.style.left="50px";
    closeimg1.style.top="-20px";
    closeimg1.style.cursor="pointer";
    l_left.appendChild(closeimg1);

    var closeimg2=document.createElement("img");
    closeimg2.src=l_close;
    closeimg2.style.width="50px";
    closeimg2.style.position="relative";
    closeimg2.style.right="0px";
    closeimg2.style.top="-20px";
    closeimg2.style.cursor="pointer";
    l_right.appendChild(closeimg2);



    //将l_left添加到html中
    document.documentElement.appendChild(l_left);

    //将l_right添加到html中
    document.documentElement.appendChild(l_right);



    //为关闭按钮注册单击事件，实现关闭广告功能
    closeimg1.addEventListener("click", function(){
        this.parentNode.style.display="none";
    })

    closeimg2.addEventListener("click", function(){
        this.parentNode.style.display="none";
    })


    //编写代码，实现对联广告随滚动条移动
    //scrollTop 代表由于滚动隐藏的高度
    window.addEventListener("scroll",function(){
        var st1=document.documentElement.scrollTop||document.body.scrollTop;
        l_left.style.top=(st1+20)+"px";
        l_right.style.top=(st1+20)+"px";
    })


    var ad = document.getElementById('ad');
    var countdown = document.getElementById('countdown');
    var closeBtn = document.getElementById('closeBtn');
    // 设置初始位置
    var position = -ad.offsetHeight;
    ad.style.bottom = position + "px";
    // 设置初始事件
    var time = 5;
    countdown.innerText = time + '秒';
    //广告上升
    var upInterval = setInterval(function () {
        position++;
        if (position >= 0) {
            clearInterval(upInterval);
            countDown();
        } else {
            ad.style.bottom = position + "px";
        }
    }, 10)
    //倒计时   广告下降
    function countDown() {
        var timeInterval = setInterval(function () {
            time--;
            if (time < 0) {
                clearInterval(timeInterval);
                ad.style.display = 'none';
            } else {
                countdown.innerText = time + '秒';
            }
        }, 1000)
//隐藏广告
        closeBtn.onclick = function () {
            clearInterval(timeInterval);
            ad.style.display = 'none';
        }
    }
</script>
</body>
</html>